import { ArrowRight, IconFont } from '@nutui/icons-react';
import { Image, Toast } from '@nutui/nutui-react';
import { useRequest } from 'ahooks';
import { useNavigate } from 'react-router-dom';

import { commonApi } from '@/application/apis/home';
import { apiOrderDetailByGet } from '@/application/apis/order';
import { ROUTE_MAP } from '@/application/constants/routerMap';
import { useGlobal } from '@/application/context/global';
import { useUser } from '@/application/hooks/use-user';
import { classNames } from '@/application/utils';
import { share } from '@/application/utils/share';
import Storage from '@/application/utils/storage';
import { ReceiveSuccess } from '@/components/ReceiveSuccess';
import { Address } from '@/types/address';

import { AwardDialog } from './components/AwardDialog';
import { RewardCard } from './components/AwardItem';
import { ExchangeECardDialog } from './components/ExchangeECardDialog';
import { AwardListProvider, useAwardList } from './context';

function formatAddress(address: Address[]): string[] {
  const addressItem = address[0];
  return [
    `${addressItem.recipient} ${addressItem.mobile}`,
    `${[
      addressItem.provinceName,
      addressItem.cityName,
      addressItem.countyName,
      addressItem.townName,
      addressItem.address
    ]
      .filter(Boolean)
      .join('')}`
  ];
}

const Container = () => {
  const { list, refreshAward } = useAwardList();
  const navigate = useNavigate();
  const { user } = useUser();
  const { goodInfo } = useGlobal();

  const handleReceive = (item: any) => {
    // 商品类型1行内积分2行内券类3微信立减金4实物类5微信红包6直充券7卡券
    switch (item.goodsType) {
      // case 1:
      //   return ExchangeECardDialog.show({
      //     onConfirm: () => {
      //       ReceiveSuccess.show({});
      //     }
      //   });
      // case 2:
      //   return ReceiveSuccess.show({
      //     content: (
      //       <div className="flex flex-col items-center">
      //         <div className="pt-3.75 text-[15px] leading-[25px] text-[#333]">
      //           奖励已发放至您的账号
      //         </div>
      //         <div className="mt-5 text-[18px] text-[#333]">186154325611</div>
      //         <div className="pt-5.75 text-[13px] text-[#999]">
      //           兑换记录可在[活动页面-已获奖励]进行查看
      //         </div>
      //       </div>
      //     ),
      //     onConfirm: () => {
      //       console.log('1');
      //     }
      //   });
      // case 4:
      //   Storage.exchangeProduct.set(item);
      //   return navigate(ROUTE_MAP.EXCHANGE_PRODUCT, { replace: true });
      // 红包
      case 5:
        return $Fw.navigateToCellSkip({
          url: `/pages/hongbao/index?token=${user?.token}&winId=${item.id}&money=${item.price}`,
          appId: 'gh_c13456376af4',
          target: 6
        });
      //奖励金
      case 3:
        return $Fw.navigateToCellSkip({
          url: `/pages/index/index?token=${user?.token}&winId=${item.id}&money=${item.price}`,
          appId: 'gh_c13456376af4',
          target: 6
        });
      default:
        return ExchangeECardDialog.show({
          goods: item,
          onConfirm: () => {
            refreshAward();
            ReceiveSuccess.show({
              onConfirm: () => {
                // share({
                //   content: '帮我集拼图，一起赢好礼',
                //   title: `快来帮我领取${goodInfo?.goodsName}`,
                //   url: `${window.location.origin}/invitee/${user?.userId}`
                // });
                Toast.show({ title: '兑换成功' });
              }
            });
          }
        });
    }
  };
  const { data: address } = useRequest(commonApi.addressList, {
    manual: true
  });

  const handleLook = async (item: any) => {
    const a: any = await apiOrderDetailByGet({ winId: item.id });
    const orderDetail = a?.order || {};
    console.log(user, orderDetail);
    switch (item.goodsType) {
      case 3:
      case 5:
        return AwardDialog.show({
          tips: '已发放至您的微信账户，请留意“服务通知”消息',
          content: (
            <div className="flex flex-col items-center py-5">
              <div className="text-center text-[20px] font-semibold text-[#105506]">
                {orderDetail.goodsName}
              </div>
              <div className="mb-6.25 mt-3.75">
                <Image className="h-17.5 w-17.5" />
              </div>
              <div className="text-xs text-[#999]">领取时间：{orderDetail.createTime}</div>
            </div>
          )
        });
      // case 2:
      //   return AwardDialog.show({
      //     tips: '奖品已发放至您的账号，请注意查看',
      //     content: (
      //       <div className="flex flex-col items-center py-5">
      //         <div className="text-center text-[20px] font-semibold text-[#105506]">
      //           {item.name}
      //         </div>
      //         <div className="mb-6.25 mt-3.75">
      //           <Image className="h-17.5 w-17.5" />
      //         </div>
      //         <div className="text-xs text-[#999]">领取时间：{item.createTime}</div>
      //       </div>
      //     )
      //   });
      // case 4:
      //   return AwardDialog.show({
      //     tips: '奖品兑换后预计7个工作日左右发放',
      //     content: (
      //       <div className="flex flex-col items-center py-5">
      //         <div className="grid gap-2 px-5">
      //           <div className="flex">
      //             <Image className="mr-2.5 h-17.5 w-17.5 flex-shrink-0" />
      //             <div className="flex h-full flex-col justify-start self-center">
      //               <div className="line-clamp-2 text-[18px] font-semibold text-[#1D5313]">
      //                 {item?.name}
      //               </div>
      //               <div className="flex flex-col text-xs text-[#999999]">
      //                 <span>{item?.specs}</span>
      //               </div>
      //             </div>
      //           </div>
      //           <span className="mt-6 text-[13px] text-black-1">收货地址：</span>
      //           <div className="flex items-center text-xs">
      //             {address.length > 0 && (
      //               <div className="grid gap-2.5 text-[15px] text-black-2">
      //                 {formatAddress(address).map((item) => (
      //                   <p key={item}>{item}</p>
      //                 ))}
      //               </div>
      //             )}
      //           </div>
      //           <div className="mt-5 text-xs text-[#999]">领取时间：{item.createTime}</div>
      //         </div>
      //       </div>
      //     )
      //   });
      default:
        return AwardDialog.show({
          tips: '券码已发放至您的账号，请留意短信',
          content: (
            <div className="flex flex-col items-center py-5">
              <div className="text-center text-[20px] font-semibold text-[#105506]">
                {orderDetail.goodsName}
              </div>
              <div className="mb-6.25 mt-3.75 flex flex-col items-center">
                <div className="text-[15px] text-[#999]">兑换账户</div>
                <div className="mt-2.5 text-[18px] text-[#666666]">
                  {orderDetail.mobile || user?.nickName}
                </div>
              </div>
              <div className="text-xs text-[#999]">领取时间：{orderDetail.createTime}</div>
            </div>
          )
        });
    }
  };
  if (!list || list.length <= 0)
    return (
      <div className="container mt-30 flex flex-col items-center">
        <Image
          src={new URL('/images/home/award_error.png', import.meta.env.VITE_IMG_BASE_URL).href}
          className="h-30 w-47.5"
        />
        <div className="mt-2.5 text-sm text-[#999]">还没有获得任何奖励哦~</div>
      </div>
    );
  return list.map((item: any, index: number) => {
    return (
      <RewardCard
        key={item.id}
        item={item}
        className={index === list.length - 1 ? 'after:none' : ''}
        handleLook={handleLook}
        handleReceive={handleReceive}
      />
    );
  });
};

export default function AwardList() {
  return (
    <AwardListProvider>
      <Container />
    </AwardListProvider>
  );
}
